import React from 'react';
import { View, Text } from 'react-native';
import { NativeCard } from 'react-docs';

const HintTag = ({ text }: { text: string }) => (
  <View
    style={{
      backgroundColor: '#EEF2FF',
      paddingHorizontal: 10,
      paddingVertical: 6,
      borderRadius: 999,
    }}
  >
    <Text style={{ color: '#4338CA', fontWeight: '600' }}>{text}</Text>
  </View>
);

export default () => (
  <NativeCard
    title="React Native 卡片"
    description="同一份组件代码即可在移动端与 Web 端复用，下面的标签同样使用 React Native 语法。"
    onPress={() => {
      console.log('[NativeCard] pressed');
    }}
  >
    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
      <HintTag text="跨端" />
      <HintTag text="TypeScript" />
      <HintTag text="React Native" />
    </View>
  </NativeCard>
);
